/* eslint-disable react/prop-types */
import React, { useState } from 'react'
//3个组件（解读，因子，总的）

// 解读
function Analysis (props) {
  const { analysisList } = props

  // 解读input改变的时候
  const analysisChange = (e, i) => {
    props.analysisChange(e, props.index, i)
  }

  // 新增一条解读
  const addAnalysis = () => {
    props.addAnalysis(props.index)
  }

  return (<>
    <li>解读：</li>
    {
      analysisList.map((val, i) => {
        return <li key={val.code}>
          <p>当（得分-划界分）在</p>
          <input type='input' name='min' value={val.min} onChange={(e) => analysisChange(e, i)} />～
          <input type='input' name='max' value={val.max} onChange={(e) => analysisChange(e, i)} />
          <p>之间，则显示</p>
          <textarea rows="3" cols="20" name='content' value={val.content} onChange={(e) => analysisChange(e, i)} />
        </li>
      })
    }
    <button onClick={addAnalysis}>新增一条解读</button>
  </>)

}

// 因子
function Factor (props) {
  const { factor } = props

  // 因子input改变的时候
  const factorChange = (e) => {
    props.factorChange(e, props.index)
  }

  return (
    <ul>
      <h2>{factor.name}</h2>
      <li>
        <input type='checkbox' name='show' value={factor.show} onChange={factorChange} />在结果中显示
      </li>
      <li>
        <input type='radio' name='evaluation_criteria' value={factor.evaluation_criteria} onChange={factorChange} />越高越好
        <input type='radio' name='evaluation_criteria' value={factor.evaluation_criteria} onChange={factorChange} />越低越好
      </li>
      <li>
        <p>总分划界分（满分：100）</p>
        <input type='input' name='demarcation_score' value={factor.demarcation_score} onChange={factorChange} />
      </li>
      <Analysis analysisList={factor.analysis} index={props.index} analysisChange={props.analysisChange} addAnalysis={props.addAnalysis} />
    </ul>
  )
}

// 总的
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
function Plan2 () {
  const [list, setList] = useState([
    {
      factorid: 2718974317,
      name: '因子1',
      show: 1,
      evaluation_criteria: 1,
      demarcation_score: 60,
      analysis: [{ code: 1212, min: 20, max: 30, content: '和欧俄劈腿业务1' },
        { code: 12121, min: 30, max: 40, content: '和欧俄劈腿业务2' }]
    },
    {
      factorid: 271897431789,
      name: '因子2',
      show: 0,
      evaluation_criteria: 0,
      demarcation_score: 60,
      analysis: [{ code: 122, min: 20, max: 30, content: '和欧俄1' },
        { code: 121, min: 30, max: 40, content: 'ewr务2' }]
    }
  ])

  // 因子input改变的时候
  const factorChange = (e, index) => {
    list[index][e.target.name] = e.target.value
    setList([...list])
  }
  // 解读input改变的时候
  const analysisChange = (e, index, i) => {
    list[index].analysis[i][e.target.name] = e.target.value
    setList([...list])
  }
  // 新增一条解读
  const addAnalysis = (index) => {
    list[index].analysis.push({ code: Math.random() * 1000, min: 0, max: 0, content: '' })
    setList([...list])
  }

  // 提交
  const submit = () => {
    console.log('submit', list)
  }

  return (
    <div>
      {
        list.map((item, index) => {
          return <Factor key={item.factorid} factor={item} index={index} factorChange={factorChange} analysisChange={analysisChange} addAnalysis={addAnalysis} />
        })
      }
      <button onClick={submit} >提交</button>
    </div>
  )
}

export default Plan2